<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import  useUserStore from '@/stores/modules/user'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

// 页面路有对象
const route = useRoute()

// 全局路由对象
const router = useRouter()

// 用户仓库对象
const userStore = useUserStore()

// 表单数据
const formData = ref({
    username: 'admin',
    password: '111111'
})

// 表单对象
const formRef = ref<any>(null)

// 表单校验规则
const rules = {
    username: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
        },
        {
            min: 2,
            max: 10,
            message: '用户名长度在2到10个字符之间',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
        },
        {
            pattern: /^\w{6,16}$/,
            message: '密码长度在6到16个数字之间',
            trigger: 'blur'
        }
    ]
}

// 登录按钮状态
const loading = ref(false)

// 登录逻辑
const Login = () => {
    loading.value = true
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            // 执行登录逻辑
            const res = await userStore.Login(formData.value)
            console.log(res);
            
            if (res.code === 200) {
                loading.value = false
                // 跳转到首页
                router.push(route.query.redirect ? route.query.redirect as string : '/')
            } else if (res.code === 201) {
                ElMessage.error('用户名或密码错误')
                loading.value = false
            } else {
                ElMessage.error('登录失败，请稍后重试')
                loading.value = false
            }
        }
    }) 
}

</script>

<template>
    <div class="login">
       <el-row>
        <el-col :span="12" :xs="0"></el-col>
        <el-col :span="12" :xs="24">
            <el-form ref="formRef" class="login-form" :model="formData" :rules="rules">
                <h1>Hello</h1>
                <h2>欢迎来到硅谷甄选</h2>
                <el-form-item prop="username">
                    <el-input v-model="formData.username" :prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="formData.password" show-password :prefix-icon="Lock" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :disabled="loading" :loading="loading" type="primary" size="large" @click="Login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
       </el-row>
    </div>
</template>


<style scoped lang="scss">
.login {
    width: 100%;
    height: 100vh;
    background-image: url('../../assets/images/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    .login-form {
        width: 80%;
        position:relative;
        top: 30vh;
        background-image: url(../../assets/images/login_form.png);
        background-repeat: no-repeat;
        background-size: cover;
        padding: 40px;
        h1 {
            color: #fff;
            font-size: 40px;
        }
        h2 {
            margin: 20px 0;
            font-size: 20px;
            color: #fff;
        }
        .el-button {
            width: 100%;
        }
    }
}
</style>